<template>
  <div>
    <el-button type="text" icon="el-icon-refresh" style="float: right;padding: 0" @click="getHealth">刷新</el-button>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header">
            <span>硬盘空间</span>
          </div>
          <div>
            <el-row class="item-row">
              <el-col :span="18">状态</el-col>
              <el-col :span="6">{{health.details.diskSpace.status}}</el-col>
            </el-row>
            <el-row class="item-row">
              <el-col :span="18">total</el-col>
              <el-col :span="6">{{health.details.diskSpace.details.total/(1024*1024*1024) | numFilter2}} GB</el-col>
            </el-row>
            <el-row class="item-row">
              <el-col :span="18">free</el-col>
              <el-col :span="6">{{health.details.diskSpace.details.free/(1024*1024*1024) | numFilter2}} GB</el-col>
            </el-row>
            <el-row class="item-row">
              <el-col :span="18">threshold</el-col>
              <el-col :span="6">{{health.details.diskSpace.details.threshold/(1024*1024) | numFilter2}} MB</el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      health: {}
    };
  },
  computed: {},
  created() {
    this.getHealth();
  },
  methods: {
    getHealth() {
      this.$http({
        url: "/management/health",
        method: "GET"
      }).then(resp => {
        this.health = resp.data;
      });
    }
  },
  filters: {
    numFilter0(value) {
      let realVal = Number(value).toFixed(0);
      return Number(realVal);
    },
    numFilter2(value) {
      // 截取当前数据到小数点后两位
      let realVal = Number(value).toFixed(2); // num.toFixed(2)获取的是字符串
      return Number(realVal);
    }
  }
};
</script>
<style scoped>
.item-row {
  margin: 20px 0;
}
.box-card:not(:first-child) {
  margin-top: 15px;
}
</style>
